<template>
    <div>
        <div id="xiaoxi">
            <van-icon name="arrow-left"  @click="$router.go(-1)" />
          <h1>消息中心 </h1>
          <p @click="paixun">
              <span>排序</span>
                <img src="../../assets/排序.png" alt="">
          </p>
        </div>
        <div class="libiao">
          <van-row>
  <van-col span="8" v-for="(item,index) in vancol" :key="index" :class="count==index?'active':''" @click="colClick(index)">{{item.name}}</van-col>
  <!-- <van-col span="8">系统消息</van-col>
  <van-col span="8">个人消息</van-col> -->
</van-row>

        </div>
        <div class="lieo">
            <ul>
                <li v-for="(item,index) in  MessageDate" :key="index" @click="Xiaoxi(item.id)">
                    <div class="Img">
                         <img src="../../assets/个人信息.png" alt="" v-if="item.type==2">
                        <img src="../../assets/系统消息.png" alt="" v-if="item.type==1">
                        <img src="../../assets/红点.png" alt="" style="position: absolute;
    left: 0.68rem;" v-show="item.isReader!=0">
                    </div>
                    <div class="twoBox">
                        <span>{{item.title}}<img src="../../assets/置顶.png" alt="" v-show="item.top==1"> </span>
                         <span>发布人:{{item.sourceName}}</span>
                    </div>
                    <div class="shijian">
                        <span>{{item.createTime}}</span><van-icon name="arrow" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import {GetMessageDate,GetUpdatesDate} from "@/request/api"
import {Gette} from "@/request/pp"
export default {
    name:"Xiaoxizhongxi",
    data () {
        return {
            count:0,
           vancol:[
               {
                name:"全部消息"
               },
                {
                name:"系统消息"
               },
                {
                name:"个人消息"
               },
              
           ],
           MessageDate:null
 
        }
    },
    methods:{
        Xiaoxi(id){
            this.$router.push(`/xiaoxixiangqing/${id}`)


            Gette({id}).then((res)=>{
                console.log("标记已读数据:",res);
            })
            
            // GetUpdatesDate({id:id}).then((res)=>{
            //     console.log("标记已读数据:",res);
            // })
        //  console.log(id);
        },
        colClick(val){
            this.count=val
            console.log(val);
            GetMessageDate(
            {current:"1",size:"20",type:val}
            ).then((res)=>{
                this.MessageDate=res.data.data.records
            console.log("消息列表数据:",res);
        })
        },
        paixun(){
           this.MessageDate.sort((a,b)=>{
                
               
                   let x=+b.createTime.split('-')[0]+ +b.createTime.split('-')[1]+ +b.createTime.split('-')[2]
                   let y=+a.createTime.split('-')[0]+ +a.createTime.split('-')[1]+ +a.createTime.split('-')[2]
                   console.log(y,x);
                 return x-y
                
             })
        }
    },
    created(){
        GetMessageDate(
            {current:"1",size:"20",type:0}
            ).then((res)=>{
                this.MessageDate=res.data.data.records
            console.log("消息列表数据:",res);
        })
    }
}
</script>
 
<style lang = "less" scoped>
    #xiaoxi{
       font-size: 0.14rem;
    background: #003399;
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    height: .8rem;
    padding: 0 .16rem;
    p{
        display: flex;
    align-items: center;
        img{
            width: .2rem;
        }
    }
    }
    .libiao{
        font-size: .14rem;
        .van-col{
            text-align: center;
            height: .5rem;
    line-height: .5rem;
    background:#fff;
    color: #999;
        }
    }
    .active{
        border-bottom:2px solid #ffcc33 ;
    }
    .lieo{
        font-size: .14rem;
        position: relative;
        ul{
            li{
                display: flex;
                align-items: center;
                padding: .15rem;
                justify-content: space-between;
                background: #fff;
                margin-top: .1rem;
               .shijian{
                       flex: 1;
                       text-align: right;
                }
  .twoBox{
      
      margin-left: .15rem;
            span{
                display: block;
                    margin-bottom: .1rem;
                    img{
                        width: .15rem;
    vertical-align: text-bottom;
    margin-left: .1rem;
                    }
            }
        }
            }
        }
      
    }
</style>